<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="div1">
    <em>em</em>
    div文本
    <strong>strong</strong>
  </div>
  <button id="btn1">节点操作</button>
  <script>
    var oDiv = document.getElementById("div1")
    var oBtn = document.getElementById("btn1")

    // document.write()
    // 功能：在页面中添加内容
    // 【注】：会覆盖页面上原有的内容

    // createElement()
    //   格式：document.createElement()
    //   参数：标签名
    //   返回值：创建好的这个节点

    // appendChild()
    //   格式：node1.appendChild(node2)
    //   功能：将node2节点插入到node1节点的子节点的末尾

    // createTextNode()
    //   格式：document.createTextNode(文本)
    //   功能：创建文本节点（纯文本）

    // insertBefore()
    //   格式：box1.parentNode.insertBefore(box2, box1)
    //   功能：将box2添加到box1的前面

    // replaceChild()
    //   格式：box1.parentNode.replaceChild(box2, box1)
    //   功能：用box2节点将box1节点替换掉

    // cloneNode()
    //   格式1：node.cloneNode()
    //   格式2：node.cloneNode(true)   克隆节点本身及其所有子节点
    //   返回值：克隆出来的新节点

    // removeChild()
    //   格式：box.parentNode.removeChild(box)
    //   功能：将box节点从页面上删除

    oBtn.onclick = function() {
      // document.write("<h1>Hello World</h1>")

      // var oP = document.createElement("p")
      // var oText = document.createTextNode("<h1>Hello World</h1>")
      // oP.appendChild(oText)
      // oDiv.appendChild(oP)

      // 将oP节点插入到oDiv节点的前面
      // document.body.insertBefore(oP, oDiv)

      // 用oP节点将oDiv节点替换掉
      // document.body.replaceChild(oP, oDiv)

      // var newNode = oDiv.cloneNode()
      // var newNode = oDiv.cloneNode(true)
      // document.body.appendChild(newNode)

      document.body.removeChild(oDiv)
    }
  </script>
</body>
</html>